<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册页面</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        .error{
            font-size: 12px;
            color:red;
        }
        #register{
            font-size: 25px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        input[type="button"]{
            margin-top: 20px;
            margin-left: 10px;
            background-color: #3b5167;
            color: white;
            font-size: 15px;
            padding: 5px 30px;
        }
        input[type="text"]{
            margin-top: 10px;
            width:150px ;
            height:25px;
            border: 1px solid #ddd
        }
        #module{
            position: fixed;
            width: 100%;
            height: 100%;
        }
        #form{
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 500px;
            padding: 5px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    /* (1）用户名不能为空
    （2）用户名必须在6-14位之间
    （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
    （4）邮箱地址合法验证。
    （5）统一失去焦点验证
    （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
    （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
    （8）最终表单中所有项均合法方可提交
     */
    $(function () {
        $("#top").load("top.html")
        $.ajax({
            url: "/PDD/user?method=getCode",
            type: "post",
            success: function (data) {
                //alert(data)
                $("#codeBtn").val(JSON.parse(data))
            }
        })
        let username = $("#username");
        let password = $("#password")
        let email = $("#email")
        let code = $("#code")
        let nameError = $("#nameError")[0]
        let passwordError = $("#passwordError")[0]
        let codeError = $("#codeError")[0]
        let emailError = $("#emailError")[0]
        username.blur(function () {
            //用户名规范正则表达式
            let regex = /^[a-zA-Z0-9]+$/
            //用户名为空,出现错误提示信息
            let name = username.val()
            if (name === "") {
                nameError.innerHTML = "用户名不能为空"
            } else if (name.length < 6 || name.length > 14) {
                nameError.innerHTML = "用户名必须在6-14位之间"
            } else if (!regex.test(name)) {
                //不符合用户名的正则表达式
                nameError.innerHTML = "用户名只能有数字和字母组成，不能含有其它符号"
            } else {
                nameError.innerHTML = ""
            }
        })
        username.focus(function () {
            //重新进入,错误提示信息消失
            nameError.innerHTML = ""
        })


        password.blur(function () {
            //密码的正则表达式(密码必须至少包含大小写字母+数字 最少六位)
            let pRegex = /\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/;
            let passwordInput = password.val()
            if (passwordInput === "") {
                passwordError.innerHTML = "密码不能为空"
            } else if (!pRegex.test(passwordInput)) {
                passwordError.innerHTML = "密码必须至少包含大小写字母+数字 最少六位"
            } else {
                passwordError.innerHTML = ""
            }
        })
        password.focus(function () {
            passwordError.innerHTML = ""
        })

        email.blur(function (){
            //邮箱验证
            const eRegex = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*\.[A-Za-z0-9]{2,}$/;
            let emailInput=email.val()
            if(emailInput===""){
                emailError.innerHTML="邮箱不能为空"
            }else if(!eRegex.test(emailInput)){
                emailError.innerHTML="邮箱格式错误"
            }else{
                emailError.innerHTML=""
            }
        })
        email.focus(function () {
            emailError.innerHTML = ""
        })

        code.blur(function () {
            let code = $("#code").val()
            let rightCode = $("#codeBtn").val()
            if (code === "") {
                codeError.innerHTML = "验证码不能为空"
            } else if (code !== rightCode) {
                codeError.innerHTML = "验证码错误"
            } else {
                codeError.innerHTML = ""
            }
        })
        code.focus(function () {
            codeError.innerHTML = ""
        })

        //验证码按钮绑定事件(点击更换验证码)
        $("#codeBtn").click(function (){
            $.ajax({
                url: "/PDD/user?method=getCode",
                type: "post",
                success: function (data) {
                    //alert(data)
                    $("#codeBtn").val(JSON.parse(data))
                }
            })
        })

        //给注册按钮绑定点击事件
        $("#registerBtn").click(function () {
            //只有当用户名和密码的校验都正确才能提交数据
            //如何知道校验都正确? 错误提示信息都为空
            //如何获取错误提示信息? 失去焦点事件触发->必须先获得焦点才能失去焦点

            //如何用js代码手动触发事件
            username.focus()
            username.blur()
            password.focus()
            password.blur()
            email.focus()
            email.blur()
            code.focus()
            code.blur()


            //判断错误提示信息是否为空
            if (nameError.innerHTML === "" && passwordError.innerHTML === "" && emailError.innerHTML==="" &&
                codeError.innerHTML === "" ) {
                //发送ajax请求 提交数据
                $.ajax({
                    url: "/PDD/user?method=register",
                    data: {
                        username: username.val(),
                        password: password.val(),
                        email:email.val(),
                        isMerchant:$("input:radio:checked").val()
                    },
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if(data.code!==1){
                            alert(data.data)
                        } else{
                            //返回注册成功结果并跳转到登录页面
                            alert(data.data)
                            window.location.href="login.html"
                        }
                    }
                })
            }else{

            }
        })
    })
</script>
<div id="top"></div>
<div id="module"></div>
<form id="form">
    <div id="register">注册</div>
    <label for="username">用户名</label><input type="text" name="username" id="username" /><span id="nameError" class="error"></span>
    <br><br>
    <label for="password">密&nbsp;&nbsp;码</label><input type="text" name="password" id="password" /><span id="passwordError" class="error"></span>
    <br><br>
    <label for="email">邮&nbsp;箱</label><input type="text" name="email" id="email" /><span id="emailError" class="error"></span>
    <br>
    <label for="code">验证码</label><input type="text" id="code" /><input type="button"  id="codeBtn" /><span id="codeError" class="error"></span>
    <br><br>
    <label>
        <input type="radio" name="isMerchant" value="0" checked />
    </label>用户注册
    <label>
        <input type="radio" name="isMerchant" value="1" />
    </label>商家入驻
    <br>
    <input type="button"  id="registerBtn" value="注册"/>
</form>
</body>
</html>